<!-- 设备计划高级搜索 -->
<template>
    <el-dialog
        title="高级搜索"
        :visible.sync="dialogVisibleSearch"
        width="650px"
        custom-class="searchDialog"
        @close ="onClose"
    >
            <div>
                <el-form ref="form" :model="formData" label-width="100px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="机构：">
                                <el-input
                                    v-model="input1"
                                    placeholder="请选择机构"
                                >
                                <i slot="suffix" class="el-input__icon el-icon-document-copy"></i>
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="计划日期：">
                                <el-date-picker type="date" placeholder="选择开始日期" value-format="yyyy-MM-dd" v-model="formData.startTime"  style="width: 47%;"></el-date-picker>
                                <div class="separ el-icon-minus"></div>
                                <el-date-picker type="date" placeholder="选择结束日期" value-format="yyyy-MM-dd" v-model="formData.endTime"  style="width: 47%;"></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="状态：">
                                <checkAll :chackdData.sync="stateForm" @checkdData="checkedStates" ref="checkedState"/>
                                <!-- <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                                <el-checkbox-group v-model="checkedState" @change="handleCheckedStateChange">
                                    <el-checkbox v-for="item in stateForm" :label="item.value" :key="item.value">{{item.label}}</el-checkbox>
                                </el-checkbox-group> -->
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" class="btn-blue" @click="onConfirm"
                    >确定</el-button
                >
                <el-button size="small" class="btn-greenYellow" @click="onEmpty"
                    >重置</el-button
                >
                <el-button size="small"  @click="dialogVisibleSearch=false">取 消</el-button>
            </span>
    </el-dialog>
</template>

<script>
import { mapState } from 'vuex'
import checkAll from '@/components/common/checkAll'
export default {
    props: {
        dialogVisibleSearch: {
            default: Boolean,
            require: true
        },
    },
    data () {
        return {
            checkAll: false,
            isIndeterminate: false,
            checkedState: [], //选择的状态
            formData: {
                'endTime': '',
                'founderId': '',
                'keyword': '',
                'limit': 10,
                'loginOrgId': '',
                'orgId': '',
                'page': 1,
                'startTime': '',
                'states': []
            }
        }
    },
    computed: {
        ...mapState({
            stateForm: state => state.equip.equipData.state//币种
        }),
        statusLable () {
            return param=> {
                const state =  this.$store.state.equip.equipData.state
                const obj = state.find(x=>x.value === param)
                return obj.label
            }
        },
    },
    mounted () {
    },
    methods: {
        //全选反选
        // handleCheckAllChange (val) {
        //     this.checkedState = []
        //     this.formData.states = []
        //     if(val) {
        //         this.stateForm.forEach(item=>{
        //             this.formData.states.push(item.value)
        //             this.checkedState.push(item.value)
        //         })
        //     }
        //     this.isIndeterminate = false
        // },
        // handleCheckedStateChange (value) {
        //     this.formData.states = []
        //     const checkedArr = []
        //     value.forEach(item=>{
        //         checkedArr.push(this.stateForm.find(x=>x.value === item))
        //     })
        //     checkedArr.forEach(item =>{
        //         this.formData.states.push(item.value)
        //     })
        //     let checkedCount = value.length
        //     this.checkAll = checkedCount === this.stateForm.length
        //     this.isIndeterminate = checkedCount > 0 && checkedCount < this.stateForm.length
        // },
        checkedStates (e) {
            this.formData.states = e
        },
        //点击确定
        onConfirm () {
            this.$emit('heightSharch', this.formData)
            this.onClose()
        },
        //重置
        onEmpty () {
            Object.assign(this.$data.formData, this.$options.data().formData) //清空表单的数据
            this.$refs.checkedState.checkdData = [] //清空子组件的已选中的数据
            this.$refs.checkedState.checkAll = false

        },
        //关闭的回调
        onClose () {
            this.$emit('heightSharchClose')
            this.onEmpty()
        }
    },
    components: {
        checkAll
    }
}

</script>

<style lang='scss' scoped>
    .separ{
        display: inline-block;
        font-weight: bold;
        width: 4%;
        margin: 0 1% 0 1%;
        text-align: center;
    }
    .dialog-footer {
        text-align: right;
    }

</style>
